<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏栀来信网上购物商城 - 商品详情</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .product-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .product-detail {
            display: flex;
            margin: 30px 0;
            gap: 40px;
        }
        .product-image {
            flex: 1;
            max-width: 500px;
        }
        .product-image img {
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .product-info {
            flex: 1;
        }
        .product-title {
            font-size: 24px;
            margin-bottom: 10px;
            color: #333;
        }
        .product-price {
            font-size: 28px;
            color: #e74c3c;
            margin: 20px 0;
        }
        .product-description {
            line-height: 1.6;
            color: #666;
            margin-bottom: 20px;
        }
        .product-actions {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        .quantity-selector {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .quantity-selector button {
            width: 30px;
            height: 30px;
            background: #f1f1f1;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .quantity-selector input {
            width: 50px;
            text-align: center;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .add-to-cart {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .add-to-cart:hover {
            background-color: #2ecc71;
        }
        .buy-now {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .buy-now:hover {
            background-color: #c0392b;
        }
        .product-specs {
            margin-top: 40px;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
        }
        .product-specs h3 {
            margin-bottom: 15px;
            color: #333;
        }
        .specs-table {
            width: 100%;
            border-collapse: collapse;
        }
        .specs-table tr:nth-child(even) {
            background: #f1f1f1;
        }
        .specs-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #ddd;
        }
        .specs-table td:first-child {
            font-weight: bold;
            width: 30%;
        }
        .related-products {
            margin-top: 50px;
        }
        .related-products h2 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .product-card {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 15px;
            transition: transform 0.3s;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .product-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 4px;
        }
        .product-card h3 {
            margin: 10px 0 5px;
            font-size: 16px;
        }
        .product-card .price {
            color: #e74c3c;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <header>
        <div class="top-bar">
            <span>学号: 23215220329 姓名: 牟其鑫</span>
            <div class="user-actions">
                <a href="login.html">登录</a> | <a href="register.html">注册</a>
            </div>
        </div>
        <div class="main-header">
            <div class="logo">夏栀来信</div>
            <div class="search-box">
                <form id="search-form" action="product.html" method="get">
                    <input type="text" name="name" placeholder="搜索商品名称..." required>
                    <button type="submit">搜索</button>
                </form>
            </div>
            <div class="cart-icon">
                <a href="cart.html">购物车(<span id="cart-count">0</span>)</a>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">热门推荐</a></li>
                <li><a href="#">节日限定</a></li>
                <li><a href="#">园艺工具</a></li>
                <li><a href="#">养护指南</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </nav>
    </header>

    <main class="product-container">
        <section class="product-detail">
            <div class="product-image">
                <img id="product-img" src="" alt="商品图片">
            </div>
            <div class="product-info">
                <h1 class="product-title" id="product-name">商品名称</h1>
                <p class="product-price" id="product-price">¥0.00</p>
                <div class="product-description" id="product-desc">
                    商品描述加载中...
                </div>
                <div class="product-actions">
                    <div class="quantity-selector">
                        <button id="decrease-qty">-</button>
                        <input type="number" id="quantity" value="1" min="1">
                        <button id="increase-qty">+</button>
                    </div>
                    <button class="add-to-cart" id="add-to-cart-btn">加入购物车</button>
                    <button class="buy-now" id="buy-now-btn">立即购买</button>
                </div>
            </div>
        </section>
        
        <section class="product-specs">
            <h3>商品详情</h3>
            <table class="specs-table">
                <tr>
                    <td>商品名称</td>
                    <td id="spec-name">-</td>
                </tr>
                <tr>
                    <td>商品编号</td>
                    <td id="spec-id">-</td>
                </tr>
                <tr>
                    <td>商品分类</td>
                    <td id="spec-category">-</td>
                </tr>
                <tr>
                    <td>适宜季节</td>
                    <td id="spec-season">-</td>
                </tr>
                <tr>
                    <td>光照需求</td>
                    <td id="spec-light">-</td>
                </tr>
                <tr>
                    <td>浇水频率</td>
                    <td id="spec-water">-</td>
                </tr>
                <tr>
                    <td>开花时间</td>
                    <td id="spec-bloom">-</td>
                </tr>
                <tr>
                    <td>植物高度</td>
                    <td id="spec-height">-</td>
                </tr>
            </table>
        </section>

        <section class="related-products">
            <h2>相关推荐</h2>
            <div class="products-grid" id="related-products">
                <!-- 相关商品将通过JS动态加载 -->
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <p>© 2023 夏栀来信网上购物商城 版权所有</p>
            <p>地址：某某省某某市某某区某某路123号</p>
            <p>联系电话：123-45678901</p>
        </div>
    </footer>

    <script>
        // 购物车功能
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        
        // 更新购物车数量显示
        function updateCartCount() {
            const count = cart.reduce((total, item) => total + item.quantity, 0);
            document.getElementById('cart-count').textContent = count;
        }
        
        // 获取URL参数
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 根据商品名称查找商品ID
        function findProductIdByName(name) {
            const products = {
                '1': { name: '加百列大天使月季' },
                '2': { name: '香雪栀子花' },
                '3': { name: '无尽夏绣球' },
                '4': { name: '文竹' }
            };

            // 去除空格并转为小写比较
            const searchName = name.trim().toLowerCase();
            
            for (const id in products) {
                const productName = products[id].name.trim().toLowerCase();
                if (productName === searchName) {
                    return id;
                }
            }
            return '1'; // 默认返回第一个商品
        }

        // 根据商品ID加载商品数据
        function loadProductData(productId) {
            // 商品数据
            const products = {
                '1': {
                    name: '加百列大天使月季',
                    price: '199.00',
                    image: 'images/product1.png',
                    description: '加百列大天使月季是一款来自日本的月季品种，花朵呈淡紫色，带有强烈的香气。植株高度约80-120cm，适合盆栽或庭院种植。',
                    category: '月季',
                    season: '四季',
                    light: '全日照',
                    water: '每周2-3次',
                    bloom: '春夏秋',
                    height: '80-120cm',
                    related: ['2', '3', '4']
                },
                '2': {
                    name: '香雪栀子花',
                    price: '39.00',
                    image: 'images/product2.png',
                    description: '香雪栀子花是栀子花中的优良品种，花朵洁白如雪，香气浓郁。适合室内外种植，是夏季观赏花卉的佳品。',
                    category: '栀子花',
                    season: '春夏',
                    light: '半日照',
                    water: '每周3-4次',
                    bloom: '夏季',
                    height: '50-80cm',
                    related: ['1', '3']
                },
                '3': {
                    name: '无尽夏绣球',
                    price: '29.00',
                    image: 'images/product3.png',
                    description: '无尽夏绣球是一种花期极长的绣球花品种，从初夏一直开到秋末。花色会根据土壤酸碱度变化，蓝色或粉色。',
                    category: '绣球花',
                    season: '夏秋',
                    light: '半日照',
                    water: '每周2-3次',
                    bloom: '6-10月',
                    height: '60-100cm',
                    related: ['1', '4']
                },
                '4': {
                    name: '文竹',
                    price: '9.00',
                    image: 'images/product4.png',
                    description: '文竹是一种常见的室内观叶植物，枝叶纤细优雅，适合书房、办公室摆放。耐阴性强，养护简单。',
                    category: '观叶植物',
                    season: '四季',
                    light: '耐阴',
                    water: '每周1-2次',
                    bloom: '不开花',
                    height: '30-50cm',
                    related: ['2', '3']
                }
            };

            const product = products[productId] || products['1']; // 默认显示第一个商品

            // 更新页面数据
            document.getElementById('product-img').src = product.image;
            document.getElementById('product-name').textContent = product.name;
            document.getElementById('product-price').textContent = `¥${product.price}`;
            document.getElementById('product-desc').textContent = product.description;
            
            // 更新规格表
            document.getElementById('spec-name').textContent = product.name;
            document.getElementById('spec-id').textContent = productId;
            document.getElementById('spec-category').textContent = product.category;
            document.getElementById('spec-season').textContent = product.season;
            document.getElementById('spec-light').textContent = product.light;
            document.getElementById('spec-water').textContent = product.water;
            document.getElementById('spec-bloom').textContent = product.bloom;
            document.getElementById('spec-height').textContent = product.height;

            // 加载相关商品
            loadRelatedProducts(product.related, products);
        }

        // 加载相关商品
        function loadRelatedProducts(relatedIds, allProducts) {
            const relatedContainer = document.getElementById('related-products');
            relatedContainer.innerHTML = '';
            
            relatedIds.forEach(id => {
                const product = allProducts[id];
                if (product) {
                    const productCard = document.createElement('div');
                    productCard.className = 'product-card';
                    productCard.innerHTML = `
                        <a href="product.html?id=${id}">
                            <img src="${product.image}" alt="${product.name}">
                            <h3>${product.name}</h3>
                            <p class="price">¥${product.price}</p>
                        </a>
                    `;
                    relatedContainer.appendChild(productCard);
                }
            });
        }

        // 页面加载时执行
        document.addEventListener('DOMContentLoaded', function() {
            updateCartCount();
            
            // 获取商品名称参数
            const productName = getQueryParam('name');
            
            // 如果没有传递名称，则尝试获取ID（兼容旧方式）
            let productId = getQueryParam('id');
            
            // 如果传了 name 参数，就根据名称查找ID
            if (productName) {
                productId = findProductIdByName(productName);
            } else if (!productId) {
                productId = '1'; // 默认显示第一个商品
            }
            
            loadProductData(productId);

            // 数量增减按钮事件
            document.getElementById('decrease-qty').addEventListener('click', function() {
                const qtyInput = document.getElementById('quantity');
                if (qtyInput.value > 1) {
                    qtyInput.value--;
                }
            });

            document.getElementById('increase-qty').addEventListener('click', function() {
                const qtyInput = document.getElementById('quantity');
                qtyInput.value++;
            });

            // 加入购物车按钮事件
            document.getElementById('add-to-cart-btn').addEventListener('click', function() {
                const productId = getQueryParam('id') || findProductIdByName(getQueryParam('name'));
                const quantity = parseInt(document.getElementById('quantity').value);
                
                // 检查是否已在购物车中
                const existingItem = cart.find(item => item.id === productId);
                
                if (existingItem) {
                    existingItem.quantity += quantity;
                } else {
                    const productName = document.getElementById('product-name').textContent;
                    const productPrice = parseFloat(document.getElementById('product-price').textContent.replace('¥', ''));
                    const productImage = document.getElementById('product-img').src;
                    
                    cart.push({
                        id: productId,
                        name: productName,
                        price: productPrice,
                        image: productImage,
                        quantity: quantity
                    });
                }
                
                // 保存到本地存储
                localStorage.setItem('cart', JSON.stringify(cart));
                updateCartCount();
                
                alert(`已成功添加 ${quantity} 件 ${document.getElementById('product-name').textContent} 到购物车`);
            });

            // 立即购买按钮事件
            document.getElementById('buy-now-btn').addEventListener('click', function() {
                const productId = getQueryParam('id') || findProductIdByName(getQueryParam('name'));
                const quantity = parseInt(document.getElementById('quantity').value);
                
                // 清空购物车并添加当前商品
                cart = [{
                    id: productId,
                    name: document.getElementById('product-name').textContent,
                    price: parseFloat(document.getElementById('product-price').textContent.replace('¥', '')),
                    image: document.getElementById('product-img').src,
                    quantity: quantity
                }];
                
                localStorage.setItem('cart', JSON.stringify(cart));
                updateCartCount();
                
                // 跳转到结算页面
                window.location.href = 'cart.html';
            });
        });
    </script>
</body>
</html>